import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Modal, Table, Button } from 'antd'

// 获取表格字段配置
function getColumns (list, onChange) {
  return [
    {
      title: '序号',
      dataIndex: 'key',
      key: 'key',
      align: 'center',
      width: 60
    },
    {
      title: '仲裁员',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '案号',
      dataIndex: 'caseno_desc',
      key: 'caseno_desc'
    },
    {
      title: '办案秘书',
      dataIndex: 'processer',
      key: 'processer'
    },
    {
      title: '办案报酬（实发）',
      dataIndex: 'real_amount',
      key: 'real_amount'
    },
    {
      title: '其中裁决书制作（协办费）',
      dataIndex: 'closuredoc_amount',
      key: 'closuredoc_amount'
    },
    {
      title: '代缴税费',
      dataIndex: 'tax',
      key: 'tax'
    },
    {
      title: '实发金额',
      dataIndex: 'real_amount_withouttax',
      key: 'real_amount_withouttax'
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100
    },
    {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      render: (v) => {
        function del () {
          const l = [...list]
          const i = l.map(li => li.id).indexOf(v)
          if (i !== -1) {
            l.splice(i, 1)
            onChange(l)
          }
        }
        return (
          <a onClick={() => { del() }}>删除</a>
        )
      }
    }
  ]
}

export default class SelectedModal extends Component {
  state = {
    data: []
  }

  componentDidUpdate (prev) {
    if (!prev.visible && this.props.visible) {
      this.updateData()
    }
  }

  updateData () {
    this.setState({
      data: [...this.props.data]
    })
  }

  onChange (v) {
    this.setState({
      data: v
    })
  }

  render () {
    return (
      <Modal title='已选项' width='1280px' open={this.props.visible} onCancel={() => this.props.hide()} maskClosable={false} footer={<Button type='primary' onClick={() => { this.props.hide(); this.props.onChange(this.state.data) }}>确定</Button>}>
        <Table height='500px' columns={getColumns(this.state.data, this.onChange.bind(this))} dataSource={this.state.data} pagination={false} />
      </Modal>
    )
  }
}

SelectedModal.propTypes = {
  visible: PropTypes.bool,
  data: PropTypes.array,
  hide: PropTypes.func,
  onChange: PropTypes.func
}

SelectedModal.defaultProps = {
  visible: false,
  data: [],
  hide: () => {},
  onChange: () => {}
}
